<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="style.css" />
    <title>Sign-up Form</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="sidebar">
        <div class="header">
          <div class="title">
            <span class="logo"></span>
            <h1>ODIN CITY</h1>
          </div>
        </div>
        <p class="author">
          Photo by
          <a
            class="link"
            href="https://unsplash.com/collections/W6Sz_ELqJGo/library-of-congress"
            target="_blank"
            rel="noopener noreferrer"
            >Library of congress</a
          >
          on
          <a
            class="link"
            href="https://unsplash.com/"
            target="_blank"
            rel="noopener noreferrer"
            >Unsplash</a
          >
        </p>
      </div>
      <div class="content">
        <div class="content__description">
          <p>
            This is not real online service! You know you need something like
            this in your life to help you realize your deepest dreams. Sign up
            <i>now</i> to get started.
          </p>
          <p>You know you want to.</p>
        </div>
        <form class="form" action="" enctype="text/plain">
          <h2 class="form__title">Let's do this!</h2>
          <div class="form__fields">
            <div class="layout-2-column">
              <div class="form__item">
                <label for="first-name"> First name </label>
                <input
                  type="text"
                  name="first-name"
                  minlength="3"
                  maxlength="25"
                  placeholder="Your name"
                  required
                />
              </div>
              <div class="form__item">
                <label for="last-name"> Last name </label>
                <input
                  type="text"
                  name="last-name"
                  minlength="3"
                  maxlength="25"
                  placeholder="Your last name"
                  required
                />
              </div>
            </div>
            <div class="layout-2-column">
              <div class="form__item">
                <label for="email"> Email </label>
                <input
                  type="email"
                  name="email"
                  placeholder="Your email"
                  required
                />
              </div>
              <div class="form__item">
                <label for="phone-number"> Phone number </label>
                <input
                  type="tel"
                  name="phone-number"
                  placeholder="Your phone number"
                  required
                />
              </div>
            </div>
            <div class="layout-2-column">
              <div class="form__item">
                <label for="password"> Password </label>
                <input
                  type="password"
                  name="password"
                  placeholder="Password"
                  required
                />
              </div>
              <div class="form__item">
                <label for="confirm-password"> Confirm password </label>
                <input
                  type="password"
                  name="confirm-password"
                  placeholder="Confirm password"
                  required
                />
              </div>
            </div>
          </div>
          <button class="button" type="submit">Create Account</button>
          <p>
            Already have an account?
            <a
              class="link"
              href="http://"
              target="_blank"
              rel="noopener noreferrer"
              >Log in</a
            >
          </p>
        </form>
        <a
          class="gitverse"
          href="https://gitverse.ru/pav_nk"
          target="_blank"
          rel="noopener noreferrer"
        ></a>
      </div>
    </div>
  </body>
</html>
